<template>
	<div class="login" clearfix>
		<div class="login-wrap">
			<el-row type="flex" justify="center">
				<el-form ref="loginForm" :model="user" status-icon label-width="80px">
					<h3>登录</h3>
					<hr>
					<el-form-item label="用户名">
						<el-input v-model="user.username" placeholder="请输入用户名" prefix-icon></el-input>
					</el-form-item>
					<el-form-item id="password" label="密码">
						<el-input v-model="user.password" show-password placeholder="请输入密码"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-upload" @click="doLogin()">登 录</el-button>
					</el-form-item>
				</el-form>
			</el-row>
		</div>
	</div>
</template>
<script>
	var th;
	
import axios from "axios";
	export default {
		created() {
			th = this;
		},
		data() {
			return {
				user: {
					username: "",
					password: ""
				}
			}
		},
		methods: {
			doLogin() {
				if (!this.user.username) {
					this.$message.error("请输入用户名！");
					return;
				} else if (!this.user.password) {
					this.$message.error("请输入密码！");
					return;
				} else {
					//校验用户名和密码是否正确;
					// this.$router.push({ path: "/personal" });
					
					 th.$axios.get("/user/check?name="+this.user.username+"&password="+this.user.password 
							
						)
						.then(res => {
							console.log(res.data);
							if (res.data.usid ==null) {
								alert("您输入的用户名或密码错误！");
							} else {
							
								console.log(res.data);
								localStorage.setItem("usimg",res.data.usimg);
								localStorage.setItem("usid",res.data.usid);
								localStorage.setItem("usname",this.user.username);
								
								sessionStorage.setItem('isLogin',1);
								this.$router.push({
									path: "/dao"
								});
							}
						});
				}
			}
		}
	}
</script>
<style>
	.loginPart {
		position: absolute;
		top: 50px;
		left: 45px;
		transform: translate(-50px, -30px);
		width: 450px;
		padding: 50px;
		background-color: #A0CFFF;
		box-sizing: border-box;
		box-shadow: 0px, 15px, 25px rgba(0, 0, 0, .5);
		border-radius: 15px;
	}

	.loginPart h2 {
		margin: 0 0 30px;
		padding: 0;
		color: #fff;
		text-align: center;
	}

	.loginPart.inputbox {
		position: relative;
	}

	.loginPart.inputElement input {
		width: 100px;
		padding: 10px 0;
		font-size: 16px;
		color: #2C3E50;
		letter-spacing: 1px;
		margin-bottom: 30px;
		border: none;
		border-bottom: 1px solid #3A8EE6;
		outline: none;
		background: transparent;
	}

	.login {
		background: url(../../build/R-C.jpg);
		width: 100%;
		height: 100%;
		position: fixed;

	}
</style>
